<template>
	<view :style="{width: width,height: height}">
		<up-image bgColor="transparent" :lazyLoad="true" :src="src" :width="width" :height="height" :radius="radius" mode="widthFix">
			<template #error>
				<view class="flex columnY centerXY width100">
					<up-image radius="10rpx" :src="errSrc" :width="errWidth" :height="errHeight"
						mode="widthFix"></up-image>
					<view v-if="errText" class="font-24 mar-top-16">{{errText}}</view>
				</view>
			</template>
			<template #loading>
				<up-loading-icon></up-loading-icon>
			</template>
		</up-image>
	</view>
</template>

<script setup>
	defineOptions({
		name: "my-image"
	});

	const props = defineProps({
		radius: {
			type: String,
			default: '0rpx'
		},
		width: {
			type: String,
			default: '750rpx'
		},
		height: {
			type: String,
			default: 'auto'
		},
		errWidth: {
			type: String,
			default: '100rpx'
		},
		errHeight: {
			type: String,
			default: '70rpx'
		},
		src: {
			type: String,
			default: ''
		},
		errSrc: {
			type: String,
			default: '/static/image/logo.png'
		},
		errText: {
			type: String,
			default: '加载失败'
		}
	})
</script>

<style scoped>
	.width100 {
		width: 100%;
	}
</style>